<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ city }} 7天天气预报</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-light: #a8d8ea; /* 浅蓝色 */
            --primary-medium: #78c4d4; /* 中等蓝色 */
            --accent-light: #f9c5d1; /* 浅粉色 */
            --accent-medium: #f2789f; /* 中等粉色 */
            --light-bg: #f8f9fa;
            --card-bg: rgba(255, 255, 255, 0.92);
            --text-dark: #37474F;
            --text-light: #78909C;
            --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            min-height: 100vh;
        }

        .dashboard-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .dashboard-header {
            background: linear-gradient(135deg, var(--primary-medium) 0%, var(--accent-medium) 100%);
            color: white;
            padding: 25px 30px;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
        }

        .dashboard-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .dashboard-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .forecast-card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s;
            border-left: 4px solid var(--primary-medium);
        }

        .forecast-card:hover {
            transform: translateY(-5px);
        }

        .forecast-date {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .weather-icon {
            font-size: 2.5rem;
            color: var(--primary-medium);
            margin-bottom: 10px;
        }

        .forecast-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--accent-medium);
            margin-bottom: 5px;
        }

        .forecast-label {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .chart-container {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
            height: 380px;
            border-top: 3px solid var(--primary-medium);
        }

        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-medium);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .chart {
            height: 300px;
            width: 100%;
        }

        .summary-card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
            text-align: center;
            border-top: 3px solid var(--accent-medium);
        }

        .summary-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-medium);
            margin-bottom: 5px;
        }

        .summary-label {
            font-size: 0.9rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .comparison-card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            height: 380px;
            border-top: 3px solid var(--accent-medium);
        }

        .comparison-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-medium);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .comparison-chart {
            height: 300px;
            width: 100%;
        }

        @media (max-width: 768px) {
            .dashboard-header {
                padding: 20px;
            }

            .dashboard-title {
                font-size: 1.8rem;
            }

            .chart-container {
                padding: 15px;
                height: 300px;
            }

            .chart {
                height: 220px;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <!-- 仪表盘头部 -->
        <div class="dashboard-header">
            <h1 class="dashboard-title">{{ city }} 7天天气预报</h1>
            <p class="dashboard-subtitle">基于气象数据分析的未来趋势预测</p>
        </div>

        <!-- 数据概览 -->
        <div class="row">
            <div class="col-md-4">
                <div class="summary-card">
                    <div class="summary-value" id="avg-temp">-- °C</div>
                    <div class="summary-label">平均温度</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="summary-card">
                    <div class="summary-value" id="avg-humidity">-- %</div>
                    <div class="summary-label">平均湿度</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="summary-card">
                    <div class="summary-value" id="avg-wind">-- m/s</div>
                    <div class="summary-label">平均风速</div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-container">
            <div class="chart-title">温度变化趋势 (°C)</div>
            <div id="temp-chart" class="chart"></div>
        </div>

        <!-- 预测卡片 -->
        <div class="row forecast-container">
            {% for day in forecast %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="forecast-card">
                    <div class="forecast-date">{{ day.date }}</div>
                    <div class="weather-icon">
                        {% if day.condition == "炎热" %}
                        <i class="bi bi-thermometer-sun"></i>
                        {% elif day.condition == "温暖" %}
                        <i class="bi bi-sun"></i>
                        {% elif day.condition == "舒适" %}
                        <i class="bi bi-cloud-sun"></i>
                        {% elif day.condition == "凉爽" %}
                        <i class="bi bi-cloud"></i>
                        {% else %}
                        <i class="bi bi-snow"></i>
                        {% endif %}
                    </div>
                    <div class="forecast-value">{{ day.temperature }} °C</div>
                    <div class="forecast-label">温度</div>

                    <div class="row mt-3">
                        <div class="col-6">
                            <div class="forecast-value">{{ day.humidity }} %</div>
                            <div class="forecast-label">湿度</div>
                        </div>
                        <div class="col-6">
                            <div class="forecast-value">{{ day.wind_speed }} m/s</div>
                            <div class="forecast-label">风速</div>
                        </div>
                    </div>

                    <div class="mt-3 text-center">
                        <span class="badge bg-primary">{{ day.condition }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 数据对比图表 -->
        <div class="comparison-card">
            <div class="comparison-title">{{ city }} 7天预测数据趋势</div>
            <div id="comparison-chart" class="comparison-chart"></div>
        </div>

        <!-- 页脚 -->
        <div class="footer text-center mt-4">
            <p>© 2025 智能气象云平台 | 数据更新于: <span id="update-time">--</span></p>
        </div>
    </div>

    <script>
        // 初始化图表
        const tempChart = echarts.init(document.getElementById('temp-chart'));
        const comparisonChart = echarts.init(document.getElementById('comparison-chart'));

        // 设置温度图表
        const dates = {{ forecast | map(attribute='date') | list | tojson }};
        const temperatures = {{ forecast | map(attribute='temperature') | list | tojson }};

        tempChart.setOption({
            tooltip: { trigger: 'axis' },
            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
            xAxis: {
                type: 'category',
                data: dates,
                axisLabel: { rotate: 45 }
            },
            yAxis: { type: 'value', name: '温度 (°C)' },
            series: [{
                name: '温度',
                type: 'line',
                data: temperatures,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: { width: 3, color: '#78c4d4' }, // 中等蓝色
                itemStyle: { color: '#78c4d4' },
                areaStyle: { color: 'rgba(120, 196, 212, 0.1)' }
            }]
        });

        // 设置预测数据对比图表 - 显示预测城市7天内的各项指标
        const forecastData = {{ forecast | tojson }};

        // 提取数据
        const tempData = forecastData.map(d => d.temperature);
        const humidityData = forecastData.map(d => d.humidity);
        const windData = forecastData.map(d => d.wind_speed);

        comparisonChart.setOption({
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(item => {
                        result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['温度 (°C)', '湿度 (%)', '风速 (m/s)'],
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dates,
                axisLabel: { rotate: 45 }
            },
            yAxis: {
                type: 'value',
                name: '值'
            },
            series: [
                {
                    name: '温度 (°C)',
                    type: 'line',
                    data: tempData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: { width: 3, color: '#e74c3c' },
                    itemStyle: { color: '#e74c3c' }
                },
                {
                    name: '湿度 (%)',
                    type: 'line',
                    data: humidityData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: { width: 3, color: '#3498db' },
                    itemStyle: { color: '#3498db' },
                    yAxisIndex: 0
                },
                {
                    name: '风速 (m/s)',
                    type: 'line',
                    data: windData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: { width: 3, color: '#2ecc71' },
                    itemStyle: { color: '#2ecc71' },
                    yAxisIndex: 0
                }
            ]
        });

        // 计算并显示平均值
        const humidities = {{ forecast | map(attribute='humidity') | list | tojson }};
        const windSpeeds = {{ forecast | map(attribute='wind_speed') | list | tojson }};

        // 确保数据存在
        if (temperatures && temperatures.length > 0) {
            const avgTemp = temperatures.reduce((a, b) => a + b, 0) / temperatures.length;
            document.getElementById('avg-temp').textContent = avgTemp.toFixed(1) + ' °C';
        } else {
            document.getElementById('avg-temp').textContent = '-- °C';
        }

        if (humidities && humidities.length > 0) {
            const avgHumidity = humidities.reduce((a, b) => a + b, 0) / humidities.length;
            document.getElementById('avg-humidity').textContent = avgHumidity.toFixed(1) + ' %';
        } else {
            document.getElementById('avg-humidity').textContent = '-- %';
        }

        if (windSpeeds && windSpeeds.length > 0) {
            const avgWind = windSpeeds.reduce((a, b) => a + b, 0) / windSpeeds.length;
            document.getElementById('avg-wind').textContent = avgWind.toFixed(1) + ' m/s';
        } else {
            document.getElementById('avg-wind').textContent = '-- m/s';
        }

        document.getElementById('update-time').textContent = new Date().toLocaleString();

        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
            tempChart.resize();
            comparisonChart.resize();
        });
    </script>
</body>
</html>